workspace: Move window captions

We consider the window previews the primary way to identify a window,
so it makes sense to give them as much space as possible. So in order
to not have title captions take up too much vertical space, overlay
them on top of the preview borders.

https://bugzilla.gnome.org/show_bug.cgi?id=783953

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 06558143f16b65f507a9b88cbd075b373c7a1b6f..fae642994a89745ef534e196f6a0702521a70288 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1112,8 +1112,7 @@ StScrollBar {
   color: #eeeeec;
   background-color: rgba(46, 52, 54, 0.7);
   border-radius: 8px;
-  padding: 4px 12px;
-  -shell-caption-spacing: 12px; }
+  padding: 4px 12px; }
   .window-caption:hover {
     background-color: #215d9c;
     color: #ffffff; }

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 70e3ae3873b5269e9632525d94cf72d7bdbfb07f..d0f74b58c31ef48caa93ae8d378f88903ac0e854 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 70e3ae3873b5269e9632525d94cf72d7bdbfb07f
+Subproject commit d0f74b58c31ef48caa93ae8d378f88903ac0e854

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index d2d8c5e346834aa7e0f750aad8e4b1aa7dc530ec..c2e62b198f20e4acfa8b19e29f5a269a6a5b66a2 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1112,8 +1112,7 @@ StScrollBar {
   color: #eeeeec;
   background-color: rgba(46, 52, 54, 0.7);
   border-radius: 8px;
-  padding: 4px 12px;
-  -shell-caption-spacing: 12px; }
+  padding: 4px 12px; }
   .window-caption:hover {
     background-color: #215d9c;
     color: #ffffff; }

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index 440da587aa585471d07a629fe696e10aaf724e81..a1b565b78b1ba87c36957c037645738600515bd8 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -439,7 +439,6 @@ var WindowOverlay = new Lang.Class({
         let title = new St.Label({ style_class: 'window-caption',
                                    text: metaWindow.title });
         title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
-        title._spacing = 0;
         windowClone.actor.label_actor = title;
 
         this._updateCaptionId = metaWindow.connect('notify::title',
@@ -475,8 +474,8 @@ var WindowOverlay = new Lang.Class({
         Shell.util_set_hidden_from_pick(this.title, true);
         Shell.util_set_hidden_from_pick(this.border, true);
 
-        parentActor.add_actor(this.title);
         parentActor.add_actor(this.border);
+        parentActor.add_actor(this.title);
         parentActor.add_actor(this.closeButton);
         title.connect('style-changed',
                       Lang.bind(this, this._onStyleChanged));
@@ -506,7 +505,7 @@ var WindowOverlay = new Lang.Class({
 
     chromeHeights: function () {
         return [Math.max(this.borderSize, this.closeButton.height - this.closeButton._overlap),
-                this.title.height + this.title._spacing];
+                (this.title.height - this.borderSize) / 2];
     },
 
     chromeWidths: function () {
@@ -552,7 +551,7 @@ var WindowOverlay = new Lang.Class({
         title.width = prevTitleWidth;
 
         let titleX = cloneX + (cloneWidth - titleWidth) / 2;
-        let titleY = cloneY + cloneHeight + title._spacing;
+        let titleY = cloneY + cloneHeight - (title.height - this.borderSize) / 2;
 
         if (animate)
             this._animateOverlayActor(title, Math.floor(titleX), Math.floor(titleY), titleWidth);
@@ -717,9 +716,6 @@ var WindowOverlay = new Lang.Class({
     },
 
     _onStyleChanged: function() {
-        let titleNode = this.title.get_theme_node();
-        this.title._spacing = titleNode.get_length('-shell-caption-spacing');
-
         let closeNode = this.closeButton.get_theme_node();
         this.closeButton._overlap = closeNode.get_length('-shell-close-overlap');
 
@@ -1951,19 +1947,16 @@ var Workspace = new Lang.Class({
             right: node.get_padding(St.Side.RIGHT),
         };
 
-        let closeButtonHeight, captionHeight;
-        let leftBorder, rightBorder;
-
         // All of the overlays have the same chrome sizes,
         // so just pick the first one.
         let overlay = this._windowOverlays[0];
-        [closeButtonHeight, captionHeight] = overlay.chromeHeights();
-        [leftBorder, rightBorder] = overlay.chromeWidths();
+        let [topBorder, bottomBorder] = overlay.chromeHeights();
+        let [leftBorder, rightBorder] = overlay.chromeWidths();
 
-        rowSpacing += captionHeight;
+        rowSpacing += (topBorder + bottomBorder) / 2;
         columnSpacing += (rightBorder + leftBorder) / 2;
-        padding.top += closeButtonHeight;
-        padding.bottom += captionHeight;
+        padding.top += topBorder;
+        padding.bottom += bottomBorder;
         padding.left += leftBorder;
         padding.right += rightBorder;